<template>
  <view class="inclusive" v-cloak>
    <image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/hehua-bg.png" mode="aspectFill" class="inclusive-bg"></image>
    <view class="inclusive-main">
      <view class="main-header">
        <view style="width: 60rpx;"></view>
        <view class="header-info" v-if="info.totalPrice != info.thresholdTotalPrice">
          <view class="h2">{{info.totalPrice}}</view>
          <view class="info-button">{{info.peopleCount || 0}}人参与</view>
        </view>
        <view class="header-right">
          <button class="tag" open-type="share"><image class="tag-icon" src="@/static/share.svg" mode="aspectFill" /></button>
          <view class="tag" @click="handleToUrl('/pages/inclusive/rule')">规则</view>
          <view class="tag" @click="handleToUrl(`/pages/inclusive/recharge-detail?type=${pondType}&pondId=${info.pondId}`)">充盈</view>
        </view>
      </view>
      <view class="main-popup" v-if="info.pageStyle>1">
        <view class="sub-title">荷花满塘共计</view>
        <view class="h2">{{info.totalPrice}}</view>
        <view class="p" v-if="info.pageStyle == '4'">您已从本期获得分红：{{info.receiveAmount}} 元</view>
        <template v-else>
          <view class="p">{{info.startTimeStr}}</view>
          <countdown-timer :time="info.countDownSeconds*1000" :autoStart="true" @finish='handleFinish()'>
            <template v-slot="{hour, minute, second}">
              <view class="p">还剩 <span style="margin-left: 10rpx;" class="sub-theme">{{hour>9?hour:'0'+hour}}：{{minute>9?minute:'0'+minute}}：{{second>9?second:'0'+second}}</span></view>
            </template>
          </countdown-timer>
          <image v-if="info.pageStyle == '3'" src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/button1.png" @click="handleOpenInclusive()" mode="aspectFill" class="button"></image>
          <image v-if="info.pageStyle == '2'" src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/button2.png" mode="aspectFill" class="button"></image>
          <!-- <image v-if="info.status == '1'" src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/button4.png" mode="aspectFill" class="button"></image> -->
        </template>
      </view>
      <uni-popup ref="hehuaPopup" type="center">
        <image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/gif/hhsk.webp" webp mode="aspectFill" class="hehua-popup"></image>
      </uni-popup>
      <uni-popup ref="hongbaoPopup" type="center">
        <view class="hongbao-popup">
          <image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/popup-bg.png" mode="aspectFill" class="popup-bg"></image>
          <view class="popup-main">
            <view class="p">本场共{{honebaoInfo.personCount}}人参与瓜分</view>
            <view class="p">恭喜您获得</view>
            <view class="h2"><span class="strong">{{honebaoInfo.dividendPrice}}</span>元</view>
            <view class="sub-title">将存入余额，稍后到账</view>
            <image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/button3.png" mode="aspectFill" class="button" @click="$refs.hongbaoPopup.close()"></image>
          </view>
        </view>
      </uni-popup>
      <view class="main-bodyer">
        <view class="bodyer-left" v-if="pondType == '2'" @click="pondType = '1'">
          <uni-icons type="left" size="20" color="#fff"></uni-icons>
          <view class="h2"><view>荷</view><view>花</view><view>池</view></view>
        </view>
        <template v-if="pondType == '1'">
          <image class="bodyer-img" src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/hehua_01.png" mode="aspectFill"></image>
        </template>
        <template v-else>
          <image class="bodyer-img" style="width: 704rpx; height: 474rpx;margin-bottom: -60rpx;" src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/hebao-gif.png" mode="aspectFill"></image>
        </template>
        <view class="bodyer-process">
          <view class="process-p">今日新增￥{{info.todaySavePrice || 0}}</view>
          <view class="process-main">
            <view class="process-step" v-if="info.totalPrice>0" :style="{width: `${(info.totalPrice / info.thresholdTotalPrice) * 100}%`}"></view>
            <view class="box-flex">
              <view class="percent">{{((info.totalPrice / info.thresholdTotalPrice) * 100).toFixed(2) || 0}}%</view>
            </view>
          </view>
        </view>
        <view class="bodyer-handle" v-if="info.haveLotusPlus && pondType == '1'" @click="pondType = '2'">
          <view class="h2"><view>荷</view><view>宝</view><view>池</view></view>
          <uni-icons type="right" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="main-card main-infoer">
        <image :src="rankingData.profilePicture" mode="aspectFill" class="card-img"></image>
        <view class="infoer-info">
          <view class="title">{{rankingData.userName || '----'}}</view>
          <view class="span" v-if="info.haveQualification">第{{rankingData.ranking || 0}}名</view>
        </view>
        <view class="infoer-list">
          <view class="list-item" @click="handleToUrl(`/mineComponentPackage/component/lotus/index`)">
            <image src="@/static/hehua-icon.png" class="hehua-img" mode="aspectFill"></image>
            荷花
            <view class="item-num">{{rankingData.lotusCount || 0}} <uni-icons type="right" size="14" color="#a8a8a8"></uni-icons> </view>
          </view>
          <view class="list-item" @click="handleToUrl(`/mineComponentPackage/component/income/index?selectType=3`)">
            <image src="@/static/integral-icon.png" class="integral-img" mode="aspectFill"></image>
            累计分红
            <view class="item-num">{{rankingData.totalDividend || 0}} <uni-icons type="right" size="14" color="#a8a8a8"></uni-icons> </view>
          </view>
        </view>
      </view>
      
      <view class="main-card main-list">
        <view class="list-header">
          <view class="sort">排名</view>
          <view class="name">姓名</view>
          <view class="num">荷花朵数</view>
        </view>
        <view class="list-item" v-for="(item,idx) in list" :key="idx">
          <view class="sort">{{idx+1}}</view>
          <view class="name">
            <image :src="item.profilePicture" mode="aspectFill" class="card-img"></image>
            <view class="h2">{{item.userName}}</view>
            <image :src="`../../static/inclusive/vip${item.level || 1}.png`" mode="aspectFill" class="card-icon"></image>
          </view>
          <view class="num">{{item.lotusCount}}</view>
        </view>
      </view>
      <uni-popup ref="VipPopup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,.9)">
        <view class="hongbao-popup vip-popup">
          <image v-if="memberInfo.level<4" src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/buyFamilyDoctor.png" mode="aspectFill" class="popup-bg"></image>
          <image v-else src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/renewMembership.png" @click="handleToMine()" mode="aspectFill" class="popup-bg"></image>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import countdownTimer from '@/components/countdown-timer.vue'
  export default {
    components:{countdownTimer},
    data() {
      return {
        info:{},
        pondType:'1',
        params:{
          page:1,
          pageSize:10
        },
        rankingData:{},
        list:[],
        honebaoInfo:{},
        memberInfo:{}
      };
    },
    onShow() {
      this.list = []
      uni.verifyLogin()
      this._initData()
      this._getRankingList()
      this.$post('/yahe/level/user').then(res=>{
        this.memberInfo = res.content
        if(!res.content.isMember||res.content.level<4){
          this.$refs.VipPopup.open()
        }
      })
    },
    watch:{
      pondType(newV,oldV){
        this.params.page = 1
        this.list = []
        this._initData()
        this._getRankingList()
      }
    },
    methods:{
      handleBack(){
        uni.navigateBack({
          delta:1
        })
      },
      handleToUrl(url){
        uni.navigateTo({
          url
        })
      },
      handleToMine(){
        uni.switchTab({
          url:'/pages/mine/mine'
        })
      },
      handleFinish(){
        this.info.pageStyle = 3
      },
      handleOpenInclusive(){  // 点击开奖
        this.$refs.hehuaPopup.open()
        this.$post('/yahe/pond/clickDraw',{
          "pondId": this.info.pondId
        }).then(res=>{
          setTimeout(()=>{
            this._initData()
            this.$refs.hehuaPopup.close()
            if(res.code == '1'){
              this.honebaoInfo = res.content
              this.$refs.hongbaoPopup.open()
            }else{
              this.$toast(res.message)
            }
          },1000)
        })
      },
      ///     network
      _initData(){ /// 荷花池数据
        uni.showLoading({
          title:'加载中...'
        })
        this.$post('/yahe/pond/info',{
          pondType:this.pondType
        },'1').then(res=>{
          this.info = res.content
        })
      },
      _getRankingList(){
        const data = {
          ...this.params,
          pondType:this.pondType          
        }
        this.$post('/yahe/distributorLotus/ranking',data).then(res=>{
          if(res.code == '1'){
            this.rankingData = res.content.myRankingPage
            this.list = [...this.list,...res.content.rankingPage.records]
            this.params.total = res.content.rankingPage.total
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.inclusive{
  min-height: 100vh;
  background: linear-gradient(180deg, #66CCC9 48.96%, #F0FFD8 85.9%);
  background-size: contain;
  .inclusive-bg{
    position: absolute;
    width: 100vw;
    height: 1108rpx;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
  .inclusive-main{
    padding: 216rpx 32rpx 0;
    position: relative;
    z-index: 100;
    .main-header{
      display: flex;
      justify-content: space-between;
      .header-info{
        text-align: center;
        .h2{
          font-size: 72rpx;
          color: #FF4848;
          margin-bottom: 16rpx;
          font-weight: bold;
        }
        .info-button{
          width:432rpx;
          line-height: 52rpx;
          border-radius: 52rpx;
          font-size: 24rpx;
          color: #fff;
          background: var(--sub-theme);
        }
      }
      .header-right{
        .tag{
          width: 60rpx;
          height: 60rpx;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          border-radius: 8rpx;
          background: #06060647;
          font-size: 20rpx;
          white-space: nowrap;
          margin-bottom: 20rpx;
          &:last-child{
            margin-bottom: 0;
          }
          .tag-icon{
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }  //   main-header end
    
    .main-popup{
      background-color: rgba(255,255,255,.9);
      border-radius: 20rpx;
      position: absolute;
      left: 108rpx;
      right: 108rpx;
      top: 216rpx;
      height: 558rpx;
      font-size: 28rpx;
      text-align: center;
      z-index: 10;
      background-image: url('https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/popup-hehua-bg.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 208rpx;
      .sub-title{
        color: #6D6D6D;
        padding-top: 78rpx;
      }
      .h2{
        font-size: 72rpx;
        color: #FF4848;
        margin-top: 20rpx;
        margin-bottom: 50rpx;
        font-weight: bold;
      }
      .p{
        color: var(--title-color);
        margin-bottom: 20rpx;
      }
      .button{
        width: 400rpx;
        height: 88rpx;
        margin-top: 46rpx;
      }
    }  /// main-popup end
    
    .hehua-popup{
      width: 717rpx;
      height: 722rpx;
    }
    .hongbao-popup{
      width: 606rpx;
      height: 808rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
      &.vip-popup{
        width: 686rpx;height:992rpx;
      }
      .popup-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
      }
      .popup-main{
        position: absolute;
        z-index: 1;
        color: var(--sub-theme);
        font-size: 28rpx;
        padding-top: 364rpx;
        text-align: center;
        width: 100%;
        .p{
          margin-bottom: 12rpx;
        }
        .h2 .strong{
          font-size: 100rpx;
          font-weight: bold;
        }
        .sub-title{
          font-size: 22rpx;
          color: #C05F49;
          margin-bottom: 40rpx;
          margin-top: 34rpx;
        }
        .button{
          width: 466rpx;
          height: 80rpx;
        }
      }
    }
    
    .main-bodyer{
      position: relative;
      display: flex;
      justify-content: center;
      .bodyer-left{
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        top: 45%;
        .h2{
          display: flex;
          flex-direction: column;
          font-size: 24rpx;
          color: #fff;
          font-weight: bold;
        }
      }
      .bodyer-img{
        width: 165rpx;
        height: 390rpx;
      }
      .bodyer-process{
        position: absolute;
        left: 84rpx;
        bottom: 18rpx;
        right: 84rpx;
        .process-p{
          color: var(--title-color);
          font-size: 18rpx;
          margin-bottom: 4rpx;
        }
        .process-main{
          line-height: 26rpx;
          border-radius: 26rpx;
          display: flex;
          align-items: center;
          overflow: hidden;
          background: rgba(63,107,94,0.54);
          color: #fff;
          font-size: 20rpx;
        }
        .process-step{
          height: 26rpx;
          border: 2rpx solid #fff;
          border-radius: 26rpx;
          position: absolute;
          background: var(--sub-theme);
        }
        .box-flex{
          align-items: center;
          position: relative;
          z-index: 10;
          padding: 0 12rpx;
          .percent{
            margin-right: 22rpx;
          }
        }
      }
      .bodyer-handle{
        display: flex;
        align-items: center;
        position: absolute;
        right: 0;
        top: 45%;
        .h2{
          display: flex;
          flex-direction: column;
          font-size: 24rpx;
          color: #fff;
          font-weight: bold;
        }
      }
    }  // main-bodyer end
    
    .main-card{
      border-radius: 20rpx;
      padding: 26rpx 20rpx;
      background: #fff;
      .card-img{
        width: 68rpx;
        height: 68rpx;
        border-radius: 68rpx;
        margin-right: 16rpx;
      }
      .card-icon{
        margin-left: 16rpx;
        width: 86rpx;
        height: 30rpx;
        border-radius: 30rpx;
      }
    }
    
    .main-infoer{
      display: flex;
      align-items: center;
      .infoer-info{
        margin-right: 20rpx;
        padding-right: 24rpx;
        border-right: 2rpx solid var(--border-color);
        font-size: 24rpx;
        .title{
          color: var(--title-color);
        }
        .span{
          color: var(--theme-color);
        }
      }
      .infoer-list{
        flex: 1;
        font-size: 20rpx;
        color: #6D6D6D;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list-item{
          display: flex;
          align-items: center;
          .hehua-img{
            width: 28rpx;
            height: 20rpx;
            margin-right: 8rpx;
          }
          .integral-img{
            width: 34rpx;
            height: 34rpx;
            margin-right: 8rpx;
          }
          .item-num{
            font-weight: bold;
            font-size: 28rpx;
            margin-left: 20rpx;
            color: var(--title-color);
            uni-icons{
              font-weight: 400;
            }
          }
        }
      }
    }  // main-infoer end
    
    .main-list{
      margin: 16rpx 0;
      padding: 24rpx;
      .list-header{
        line-height: 1;
        color: var(--sub-title);
        display: flex;
        align-items: center;
        font-size: 20rpx!important;
        .sort,.name{
          font-size: 20rpx!important;
        }
      }
      .list-item{
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        &:last-child{
          margin-bottom: 0;
        }
        .num{
          color: var(--sub-theme);
        }
      }
      .sort{
        width: 60rpx;
        text-align: center;
        margin-right: 16rpx;
        font-size: 26rpx;
      }
      .name{
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 24rpx;
      }
    }
    
  }   //  inclusive-main end
}
</style>
